<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>课堂练习题</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<fieldset id="E01">
		<legend >{{text}}</legend>
		<ul>
			<li>{{sj}}</li>
			<li>{{lzs}}</li>
			<li>{{lk}}</li>
		</ul>
	</fieldset>
	<script type="text/javascript">
	/**
	1.在legend中写入 "水泊梁山", 并且让其内容不可改变
	2.在三个 li 中 写入三个水浒英雄的名字
	*/
	var v1 = new Vue({
		el:"#E01",
		data :{
			text:"水泊梁山",
			sj :"宋江",
			lzs:"鲁智深",
			lk:"李逵"
		}
	});
	</script>

	<fieldset id="E02">
		<legend v-cloak>{{text}}</legend>
		<ul>
			<li v-html="sj"></li>
			<li v-html="lzs"></li>
			<li v-html="lk"></li>
		</ul>
	</fieldset>
	<script type="text/javascript">
	/**
	1.在legend中写入 "水泊梁山" 并加上"斗篷"
	2.给每个li中添加一个按钮, 每个按钮上显示一个水浒英雄的名字
	*/

	var v2 = new Vue({
		el:"#E02",
		data: {
			text:"水泊梁山",
			sj :"<button>宋江</button>",
			lzs:"<button>鲁智深</button>",
			lk:"<button>李逵</button>"
		}
	});
	</script>


	<fieldset id="E03">
		<legend>练习题3: 计算属性</legend>
		<dl>
			<dt>{{name}}</dt>
			<dd>力量:{{power}}</dd>
			<dd>智力:{{intel}}</dd>
			<dd>敏捷:{{agile}}</dd>
			<dd>综合战力:{{count}}</dd>
		</dl>
	</fieldset>
	<script type="text/javascript">
	var heroe = {name:"花和尚鲁智深",power:98, intel:76, agile:73};
	/**
	1. 将 heroe 对象的值设置到 dl 中
	3. 第 4 个 dd 使用计算属性算出其综合战力值 = 力量 + 智力 + 敏捷
	*/
	var v3 = new Vue({
		el:"#E03",
		data:{
			name: heroe.name,
			power:heroe.power,
			intel:heroe.intel,
			agile: heroe.agile
		},
		computed:{
			count(){
				return this.power+this.intel+this.agile;
			}
		}
	});

	</script>


	<fieldset id="E04">
		<legend >练习题4: 样式设置</legend>
		<div v-bind:style="divs()">
			<img  v-bind:src="sj1" :style="img()"><br> <span >{{sj}}</span>
		</div>
		<div  v-bind:style="divs()">
			<img  v-bind:src="lk1" :style="img()"><br> <span >{{lk}}</span>
		</div>
		<div v-bind:style="divs()">
			<img  v-bind:src="lzs1" :style="img()"><br> <span >{{lzs}}</span>
		</div>
	</fieldset>
	<script type="text/javascript">
	/**
	1. img 中添加水浒英雄的图片, 并且使用属性设定高度为100px
	2. 给 div 设置: 宽度120px + 文字居中 + 边框 + 行内块 + 内边距5px
	3. 给 span 添加英雄名字
	*/
	var v4 = new Vue({
		el:"#E04",
		data :{
			sj1: "img/宋江.png",
			lk1:"img/李逵.jpeg",
			lzs1:"img/鲁智深.jpeg",
			sj :"宋江",
			lzs:"鲁智深",
			lk:"李逵"
		},
		methods:{
			img : function (){
				return {width:'100px'};
			},
			divs : function (){
				return {width: '120px',textAlign:'center',border: '1px solid',display:'inline-block',padding:'5px' };
			}
		}
	});
	</script>


	<style>
	.border {
		border: 2px solid blue;
	}
	
	.text {
		color: red;
		text-align: center;
	}
	
	.size {
		width: 150px;
		height: 150px; padding : 5px;
		display: inline-block;
		margin: 5px;
		padding: 5px;
	}
	</style>
	<fieldset id="E05">
		<legend>练习题5: class属性</legend>
		<div id="div1" v-bind:class="['size']">
			<img width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
			 <br> 关注样式
		</div>
		<div id="div2" v-bind:class="{border:aFlag,size:aFlag}" >
			<img width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
			 <br> 关注样式
		</div>
		<div id="div3"  v-bind:class="mystyle">
			<img width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"> 
			<br> 关注样式
		</div>
	</fieldset>
	<script type="text/javascript">
	/**
	1. 将 .size 样式应用到 div1 上 ( 数组方式)
	2. 将 .border .size 样式应用到 div2 上 ( 对象方式)
	2. 将 .border .text .size 样式应用到 div3 上 ( 计算属性方式)
	*/
	var v5 = new Vue({
		el:"#E05",
		data:{
			aFlag: true,
			bFlag: false
		},
		computed: {
			mystyle(){
				return ['size','text','border'];
			}
		}
	});
	</script>


</body>
</html>